<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fns" uri="http://java.sun.com/jsp/jstl/functionss" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>停车场列表</title>
    <jsp:include page="../../body/link-page.jsp" flush="true"/>
    <style type="text/css">
        .layui-upload-drag {
            width:320px;
            height:160px;
            margin-left: 30px;
            border: 1px dashed #e2e2e2;
            background-color: rgba(204, 204, 204, 0.1);
            text-align: center;
            cursor: pointer;
            color: #999
        }

        .layui-upload-drag .layui-icon {
            margin-top: 40px;
            font-size: 68px;
            color: #999
        }
    </style>
</head>

<body>
<div class="panel" >
    <form id="form" action="/car/parking/list" method="post">
    <div class="panel-heading row">
        <div  class="col-md-8">
            <button type="button" id="demo-dt-addrow-btn" class="btn btn-info" onclick="LAYER.addLayerWithSize('layer_parkingAdd','添加停车场','/car/parking/add','800px','620px')">
                <i class="fa fa-plus"></i> 添加
            </button>
            <button type="button" class="btn btn-success" onclick="toEdit();"><i class="fa fa-edit"></i>修改</button>
            <button type="button" class="btn btn-primary" onclick="deleteAll();"><i class="fa fa-trash-o"></i>删除</button>
        </div>

        <div class="col-md-4">
            <div class="input-group" style="text-align: right">
                <div class="input-group-addon">
                    <span class="fa fa-search"></span>
                </div>
                <input type="text" name="search" id="search" class="form-control col-md-3" placeholder="搜索列表内容"/>
                <div class="input-group-btn">
                    <button type="button" class="btn btn-primary btn-search">搜索</button>
                    <button type="button" class="btn btn-primary btn-reset" style="margin-left: 3px;">重置</button>
                </div>
            </div>
        </div>
    </div>




        <div class="panel-body" id="table-box">
            <table id="table" class="table table-striped table-bordered dataTable no-footer dtr-inline"
                   cellspacing="0" width="100%" role="grid" aria-describedby="demo-dt-addrow_info"
                   style="width: 100%;"
                   data-pn="${parkingList.pageNum}" data-ps="${parkingList.pageSize}" data-tp="${parkingList.totalPage}"
                   data-tr="${parkingList.totalRecord}">
                <thead>
                <tr role="row">
                    <th style="width: 20px;"><input type="checkbox" id="check-all"/></th>
                    <th>名称</th>
                    <th>总层数</th>
                    <%--<th>省</th>--%>
                    <%--<th>市</th>--%>
                    <%--<th>区</th>--%>
                    <%--<th>经度</th>--%>
                    <%--<th>纬度</th>--%>
                    <th>白天费用</th>
                    <th>晚上费用</th>
                    <th>开放时间</th>
                    <th>结束时间</th>
                    <th>负责人</th>
                    <th>联系方式</th>
                    <th>免费时长</th>
                    <th>具体地址</th>
                    <th>备注</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach var="parking" items="${parkingList.results}" varStatus="status">
                    <tr role="row" class="odd">
                        <td><input type="checkbox" value="${parking.id}"/></td>
                        <td>${parking.name}</td>
                        <td>
                            <c:set  var="floor" value="${parking.floor}层" ></c:set>
                                ${parking.floor==null?parking.floor:floor}
                        </td>
                        <%--<td>${parking.province}</td>--%>
                        <%--<td>${parking.city}</td>--%>
                        <%--<td>${parking.area}</td>--%>
                        <%--<td>${parking.address}</td>--%>
                        <%--<td>${parking.lng}</td>--%>
                        <%--<td>${parking.lat}</td>--%>
                        <td>
                        <c:set  var="dayFee" value="${parking.dayFee}元" ></c:set>
                            ${parking.dayFee==null?parking.dayFee:dayFee}
                    </td>
                        <td>
                            <c:set  var="nightFee" value="${parking.nightFee}元" ></c:set>
                                ${parking.nightFee==null?parking.nightFee:nightFee}
                        </td>
                        <td>${fns:dateToHours(parking.startTime)}</td>
                        <td>${fns:dateToHours(parking.stopTime)}</td>
                        <td>${parking.contacts}</td>
                        <td>${parking.conPhone}</td>
                        <td>
                            <c:set  var="charging" value="${parking.charging}分钟" ></c:set>
                                ${parking.charging==null?parking.charging:charging}
                        </td>
                        <td>${parking.province}${parking.city}${parking.area}${parking.address}</td>
                        <td>${parking.info}</td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <ul class="pagination"></ul>
        </div>

    </form>
</div>
</body>
<jsp:include page="../../body/javascript-page.jsp" flush="true"/>
<script type="application/javascript">

    function validform(id){
        return $("#"+id).validate({
            ignore: [],
            rules: {
                name: {
                    required: true,
                    minlength: 2,
                    maxlength: 10
                },
                floor:{
                    required:true,
                    digits:true,
                },
                province:{
                    required:true
                },
                city:{
                    required:true,
                },
                area:{
                    required:true,
                },
                dayFee:{
                    required:true,
                    number:true
                },
                nightFee:{
                    required:true,
                    number:true
                },
                startTime:{
                    required:true,
                    dateTime:true,
                },
                stopTime:{
                    required:true,
                    dateTime:true,
                },
                contacts:{
                    required:true,
                    minlength:2,
                    maxlength:6
                },
                conPhone:{
                    required:true,
                    myPhone:true,
                },
                charging:{
                    required:true,
                    number:true
                },
            },
            errorPlacement: function (error, element){
                error.insertAfter(element.parent());
            },
            messages: {
                name: {
                    required: "请输入停车场名称",
                    minlength: "停车场名称至少有两个字符组成",
                    maxlength: "停车场名称最多有十个字符组成"
                },
                floor:{
                    required:"请输入停车场的总层数",
                    digits:"停车场的总层数只能输入整数"
                },
                province:{
                    required:"请选择停车场所在的省份"
                },
                city:{
                    required:"请选择停车场所在的市"
                },
                area:{
                    required:"请选择停车场所在的区/县"
                },
                dayFee:{
                    required:"请输入白天的费用(小时/元)",
                    number:"白天费用只能是数字(小时/元)"
                },
                nightFee:{
                    required:"请输入晚上的费用(小时/元)",
                    number:"晚上费用只能是数字(小时/元)"
                },
                startTime:{
                    required:"请输入开放时间",
                    dateTime:"请输入正确的开放时间"
                },
                stopTime:{
                    required:"请输入结束时间",
                    dateTime:"请输入正确的结束时间",
                },
                contacts:{
                    required:"请输入联系人",
                    minLength:"联系人至少有两个字符串组成",
                    maxlength:"联系人最多有六个字符串组成"
                },
                conPhone:{
                    required:"请输入联系人的手机号",
                    myPhone:"请输入正确的手机号",
                },
                charging:{
                    required:"请输入停车场设置的免费时长(单位：分钟)",
                    number:"停车场设置的免费时长为整数（单位：分钟）"
                },
            },
        });
    }

    function toEdit(){
        var id = getAllCheck("form");
        if(id.length != 1){
            layer.msg("请选择一条数据",{icon:0,timeout:1000});
        } else {
            LAYER.addLayerWithSize("layer_parkingEdit","修改停车场","/car/parking/edit?id="+id,"800px","620px");
        }
    }

    function  deleteAll() {
        var  ids=getAllCheck("form");
        if(ids.length <=0){
            layer.msg("请选择删除的数据",{icon:0,timeout:1000});
        }else{
            layer.confirm("确定要删除" + ids.length + "条数据？",{title:"提示",btn:["确定","取消"]},function () {
                $.ajax({
                    type:"POST",
                    url:"/car/parking/deleteDataByIds",
                    dataType:"json",
                    data:{"ids":ids.join(",")},
                    success:function (data) {
                        if(data.success){
                            layer.msg("删除成功",{icon:1,timeout:1000});
                            reloadPage();
                        } else {
                            layer.msg("删除失败",{icon:2,timeout:1000});
                        }
                    }
                    });
            });

        }

     }

    function parentSet(picture) {
        var id=picture.id;
        $(".img-id").val(picture.id);
        var imgDiv= $(".layui-upload-drag");
        imgDiv.empty();
        var img=document.createElement("img");
        img.className="img-parking";
        img.src=picture.src;
        img.setAttribute("max-width","100%");
        img.setAttribute("height","100%");
        img.onerror="${basePath}/static/img/head/default-head.jpg";
        imgDiv[0].appendChild(img);
        imgDiv.css("border-color" ,"#FFFAFA");
        imgDiv.css("background-color" ,"#FFFAFA");
    }


</script>
</html>
